<template>
  <div class="box">
    <navBar :navBar="navBar"></navBar>
    <div class="content">
      <div :class="[activeIndex == 0?'active':'','itemBox']" @click="setActiveIndex(0)">
        <p>{{ $t("线路1") }}</p>
      </div>
      <div :class="[activeIndex == 1?'active':'','itemBox']" @click="setActiveIndex(1)">
        <p>{{ $t("线路2") }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "switchLine",
  components: { navBar },
  data() {
    return {
      account: "",
      password: "",
      navBar: {
        back: true,
        title: this.$t("login.切换线路"),
        close: false,
        btn: "",
      },
      activeIndex: 0,
    };
  },
  mounted() {},
  methods: {
    // 切换线路
    setActiveIndex(val){
      this.activeIndex = val;
    },
    // 在线客服
    goService() {
      window.open(
        "https://v.chatabc.xyz/index?key=1b192c879c79f382a1c2981a186d7ffd&lang=en&metadata=%7B%22name%22:%22%E6%B8%B8%E5%AE%A2%22,%22ID%22:37,%22niceName%22:%22yk_37%22%7D",
        "_blank"
      );
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  position: absolute;
  left: 0px;
  top: 0;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  background-color: #f7f6fb;
  .content {
    padding: 15px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .itemBox {
      width: 100%;
      box-sizing: border-box;
      background-image: linear-gradient(#fff, #e8e8e8);
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      p {
        color: #333;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        height: 40px;
      }
      &.active {
        background: #3c475c;
        border: 1px solid #3c475c;
        p {
          color: #fff;
        }
      }
      &:first-child {
        margin-bottom: 10px;
      }
    }
  }
}
</style>